---
tab: 个人信息
---
<template>
  <my-wrapper title="基本信息" class="account-wrapper" fit v-loading="loading">
    <template v-slot:extra>
      密码经过加密不可逆，如需修改密码，直接输入新密码，如：123456
    </template>
    <el-form ref="form" size="small" :model="model" :rules="rules" style="width: 300px">
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="model.username" placeholder="账号" clearable />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="model.password" placeholder="密码" clearable />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realname">
        <el-input type="text" v-model="model.realname" placeholder="真实姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input type="text" v-model="model.mobile" placeholder="手机号" clearable />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input type="text" v-model="model.email" placeholder="邮箱" clearable />
      </el-form-item>
      <el-button size="small" type="primary" @click="handleOk" :loading="saveLoading">更新信息</el-button>
    </el-form>
  </my-wrapper>
</template>

<script>
import {isMobile } from '@/utils/validate'

import {getSysUserInfo, postSysUserUpdate} from '$my/code/api/sys-user'

export default {
  name: 'user',
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }

    return {
      loading: false,
      saveLoading: false,
      model: {
        username: '',
        realname: '',
        password: '',
        mobile: '',
        email: ''
      },
      rules: {
        username: [{required: true, message: '必填项'}],
        password: [{required: true, message: '必填项'}],
        realname: [{required: true, message: '必填项'}],
        mobile: [
          {required: true, message: '必填项'},
          { validator: validateMobile, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init() {
      this.loading = true
      getSysUserInfo().then(res => {
        this.loading = false
        const user = res.user
        const {userId, username, mobile, password, email, realname} = user
        this.tempPassword = password
        this.model = {userId, username, mobile, password, email, realname}
      })
    },
    handleOk() {
      this.$refs.form.validate(ok => {
        if(!ok) return
        const {password, ...others} = this.model
        const params = {...others}

        if(password !== this.tempPassword) {
          params.password = password
        }

        this.saveLoading = true
        postSysUserUpdate(params).then(res => {
          this.saveLoading = false
          this.$notify.success('更新个人信息成功！')

          this.init()
        }).catch(e => {
          this.saveLoading = false
          console.error(e)
        })
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.account-wrapper {
  background-color: #FFF;
}
</style>
